<template>
<div id="app" class="app-page" >
  <el-row :gutter="50">
    <el-col :span="4">
      <div class="logo">
        <img src="../../assets/icon.png" alt="" style="height: 100%;">
      </div>
    </el-col>
    <el-col :span="7"><div class="grid-content ">
      <el-menu :default-active="this.$route.path" class="myEl-menu" mode="horizontal" background-color="Transparent" router>
        <el-menu-item index="/HomePage">
          <i class="el-icon-s-home"/>
          <span>主页</span>
        </el-menu-item>
        <el-menu-item index="/RecommendPage">
          <i class="el-icon-star-on"/>
          <span>精选</span>

        </el-menu-item>
        <el-menu-item index="/ExplorePage/ExploreComponent">
          <i class="el-icon-s-grid"/>
          <span>发现</span>

        </el-menu-item>


      </el-menu>
    </div></el-col>
    <el-col :span="7">
      <div style="padding-top: 0.7rem">
        <el-form  @submit.native.prevent>
          <el-form-item>
            <el-input
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="searchText"
                @keydown.enter.native = "search"
            >
              <el-button
                  slot="append"
                  type="primary"
                  @click="search">搜索</el-button>

            </el-input>
          </el-form-item>

        </el-form>

      </div>

    </el-col>
    <el-col :span="6" >
      <div style="display: flex; " >
        <div>
          <el-popover
              placement="top-end"
              title="消息"
              width="300"
              trigger="hover">
              <message-component/>
            <el-badge :value="getMessageUnreadNumber" :max="99" class="item" slot="reference" >
              <el-button icon="el-icon-message" circle></el-button>
            </el-badge>
          </el-popover>
        </div>
        <div style="padding-top: 0.5rem;padding-left: 2rem" >
          <el-popover
              placement="top"
              title=""
              width="300"
              trigger="hover"

              popper-class="popover"
          >
              <info-component/>
            <el-avatar slot="reference"
                       :src="getUser.userImg | url"></el-avatar>
          </el-popover>
        </div>
      </div>
    </el-col>
  </el-row>


</div>
</template>

<script>

import InfoComponent from './info/InfoComponent'
import MessageComponent from './message/MessageComponent'

export default {
  name: "PilotComponent",
  props: {},
  data() {
    return {
      searchText:''
    }
  }, methods: {
    search(){
      try{
        this.searchText=this.searchText.trim()
        if(this.searchText=='' || this.searchText===''){
          this.log('please input text on the search-input');
          return;
        }

        this.$store.commit("setSearchText",this.searchText);


        this.$router.replace({name:'TransferPage',query:{
            searchText : this.searchText
          }})

      }catch (e){

      }


    },
    log(msg) {
      this.$message({
        message:msg,
        type:'warning'
      });

    },
    // handleSelect(key, keyPath) {
    //   this.log(key+"--->"+keyPath);
    // }

  }, watch: {}, computed: {

    getMessageUnreadNumber(){
      let unread = undefined;
      try {
       unread =this.$store.getters.getUser.unread
        if(unread!==undefined){
          return unread.length;
        }
        return 0;
      }catch (e){
        return 0;
      }


    },
    getUser(){
      return this.$store.getters.getUser
    },


  },components:{
    InfoComponent,
    MessageComponent
  },filters:{
    url(value){
      return '/api'+value;
    }
  },
  mounted() {
    this.searchText=null
    // console.log(this.$store.state)
  }
}
</script>

<style >
.logo{
  height: 60px;
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}


</style>
<style>
.myEl-menu{
  border: none !important;
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 0;
  background-color: #FFF;
}
</style>